<div>
  <h3 class="devui-h3-title">{{ 'components.design-color.colorDemo.instance.title' | translate }}</h3>
  <div class="devui-demo-text" style="margin-bottom: 16px">{{ 'components.design-color.colorDemo.instance.description' | translate }}</div>
  <div class="color-block block-1"></div>
  <div class="color-block block-2"></div>
  <div class="color-block block-3"></div>
  <div class="color-block block-4"></div>
  <div class="color-block block-5"></div>
  <div class="color-block block-6"></div>
  <div class="color-block block-7"></div>

  <div *ngFor="let table of dataSource | keyvalue: preserveOrder">
    <div class="devui-table-catalog">
      {{ 'components.design-color.colorDemo.instance.catalogs.' + table.key | translate }}
    </div>
    <d-data-table #datatable [dataSource]="table.value">
      <thead dTableHead>
        <tr dTableRow>
          <th dHeadCell>{{ 'components.design-color.colorDemo.instance.defaultTable.colorVar' | translate }}</th>
          <th dHeadCell>{{ 'components.design-color.colorDemo.instance.defaultTable.themeValue' | translate }}</th>
          <th dHeadCell>{{ 'components.design-color.colorDemo.instance.defaultTable.description' | translate }}</th>
        </tr>
      </thead>
      <tbody dTableBody>
        <ng-template let-rowItem="rowItem" let-rowIndex="rowIndex">
          <tr dTableRow>
            <td dTableCell>{{ rowItem?.name }}</td>
            <td dTableCell>
              <div class="color-name">
                {{ rowItem?.value }}
              </div>
              <div *ngIf="rowItem?.value" class="color-cube" [ngStyle]="{ 'background-color': rowItem?.value }"></div>
            </td>
            <td dTableCell>{{ rowItem?.description }}</td>
          </tr>
        </ng-template>
      </tbody>
    </d-data-table>
  </div>
  <div style="margin-top: 8px">
    <span class="devui-table-catalog">{{ 'components.design-color.colorDemo.instance.formColor' | translate }}</span>
    <div class="swatches">
      <div *ngFor="let col of colorTypeList; let index = index" class="formColor">
        <div *ngFor="let block of colorNumberList; let idx = index">
          <div class="swatches-block" [ngStyle]="{ color: idx > 4 ? '#fff' : '#252b3a' }" [ngClass]="'block-' + col + '-' + block">
            <div>{{ '$devui-' + col + '-' + block }}</div>
            <div>{{ swatchesList['devui-' + col + '-' + block] }}</div>
          </div>
        </div>
        {{ col }}
      </div>
    </div>
    <div class="swatches"></div>
  </div>
</div>
